<template>
	<view class="login-container">
		<image src="@/static/logo.png" class="logo" />
		<!-- <view class="login-name">捉友</view> -->
		<view class="login-title">「一捉即友，桌游常有！」</view>
		<view class="login-subtitle">Draw出乐趣，友你才行</view>
		<view class="login-btn">
			<u-button plain @click="login" color="#f17700" size="large"> 一键登录 </u-button>
		</view>
	</view>
</template>

<script>
import { baseurl } from '@/api/http.js';
import request from '@/api/http.js';

export default {
	data() {},
	methods: {
		login() {
			uni.showLoading({
				title: '登陆中...',
				mask: true
			});
			uni.login({
				provider: 'weixin',
				success: async (lres) => {
					console.log(lres);
					uni.request({
						url: baseurl + '/user/login',
						method: 'POST',
						data: {
							code: lres.code
						},
						header: {
							'content-type': 'application/json'
						},
						success: (res) => {
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 2000
							});
							const token = res.data.data.token;
							const openid = res.data.data.openid;
							const userId = res.data.data.id;

							uni.setStorageSync('token', token);
							uni.setStorageSync('openid', openid);
							uni.setStorageSync('userId', userId);

							this.getUserData(openid);
							uni.navigateBack();
						},
						fail: (error) => {}
					});
				},
				fail: (error) => {
					console.log(error);
				}
			});
		},
		async getUserData(openid) {
			let res = await request(`/user/getUserData?openid=${openid}`);
			console.log(res.data);
		}
	},
	onUnload() {
		if (!uni.getStorageSync('token')) {
			uni.showToast({
				title: '请登录以获取更多功能！',
				icon: 'none',
				duration: 2000
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-image: linear-gradient(to bottom, #fff, #ffc99394);
}

.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50rpx 0;

	.logo {
		width: 300rpx;
		height: 300rpx;
		border-radius: 25rpx;
		margin-top: 100rpx;
	}

	.login-name {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.login-title {
		margin-top: 150rpx;
		font-size: 36rpx;
		color: #333;
	}

	.login-subtitle {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #666;
	}

	.login-btn {
		margin-top: 100rpx;
		width: 70%;
		color: $theme-color;

		.u-button {
			border-radius: 25rpx;
			.u-icon {
				margin-right: 10rpx;
			}
		}
	}

	.login-protocol {
		display: flex;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666;

		.highlight {
			color: $theme-color;
			font-weight: bold;
		}
	}
}
</style>
